<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import LEchart from "@/uni_modules/lime-echart/components/l-echart/l-echart.vue";
import * as  echarts from '@/statistics/echarts.esm';

import {onMounted, ref,nextTick} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {danrenyeji} from "@/request/api";
import {getMonthRangeTimestamps, timestampToDate} from "@/utils";
const chartRef = ref(null);
let date = new Date();
const result = ref({});
const payload = ref({
  start_time:'',
  end_time:'',
  startTime:'',
  endTime:'',
  month:''
})
onLoad(()=>{

  initDate(date.getFullYear(),date.getMonth()+1);
  // getData();
  nextTick(()=>{
      // initChart()
  })
})
const initDate = (year,month) => {
  payload.value.month =month;
  let {start,end} = getMonthRangeTimestamps(year,month);
  payload.value.start_time = start;
  payload.value.end_time = end;
  payload.value.startTime = timestampToDate(start);
  payload.value.endTime = timestampToDate(end);
  getData();
}
const getData = () => {
  let data = {};
  if (payload.value.start_time){
    data.start_time = payload.value.start_time;
    data.end_time = payload.value.end_time;
  }
  danrenyeji({
      ...data
  }).then(res=>{
    result.value = res.data;
    initChart(res.data.arr)
  })
}
//初始化图标
const initChart = async (data) => {
  if (!chartRef.value) return
  const myChart = await chartRef.value.init(echarts)
  let option = {
    legend: {},
    tooltip: {
      trigger: "axis",
      fontSize: 14,
    },
    xAxis: {
      type: 'category',
      data: Object.keys(data),
      axisLabel: {
        margin: 10,
        textStyle: {
          fontSize: 14
        },
      },
      axisLine: {
        lineStyle: {
          color: '#999999',
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,

      },
    },
    yAxis: [{
      name:'吨',
      axisLabel: {
        formatter: '{value}',
        textStyle: {
          fontSize: 11
        },
      },
      axisLine: {
        lineStyle: {
          color: '#5F3FE7',
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,

      }
    },
      {
        name:'吨',

        type: 'value',
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            fontSize: 11
          },
        },
        axisLine: {
          lineStyle: {
            color: '#00B050',
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,

        }
      }

    ],
    series: [{
      type: 'bar',
      name: "下单数",
      data: Object.values(data).map(item=>item.xiadanshu),

      barWidth: '15%',
      itemStyle: {
        color: '#5F3FE7' // 设置柱状图的颜色
      },
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: "{c}个"
        }
      }
    },
      {
        type: 'bar',
        name: "实际发货数",
        yAxisIndex: 1,
        data: Object.values(data).map(item=>item.fahuoshu),

        barWidth: '15%',
        itemStyle: {
          color: '#00B050' // 设置柱状图的颜色
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: "{c}个"
          }
        }
      }
    ]
  };
  myChart.setOption(option)
}
//日期选择
const dateChange = ({detail:{value}}) => {
  let [year,month]= value.split('-')
  initDate(year,month);

}
</script>
<template>
  <view class="individual-statistics">
<!--    <u-navbar placeholder title="单人业绩统计"></u-navbar>-->
    <view style="height: 30rpx;"></view>
    <view class="sift">
      <view class="date-range">
        <picker :end="date" @change="dateChange" mode="date" fields="month">
          <view class="month">
            <text>{{payload.month}}月</text>
            <image src="/static/down.png"></image>
          </view>
        </picker>
        <view class="date">
          {{payload.startTime}}-{{payload.endTime}}
        </view>
      </view>
    </view>
    <view class="count">
<!--fahuototal: 222
totalprice: 66
xiadantotal: 54678      -->
      <view>
        <text>下单数量</text>
        <text style="color: #5F3FE7;">{{result.xiadantotal}}吨</text>
      </view>
      <view>
        <text>实际发货数统计</text>
        <text style="color: #00B050;">{{result.fahuototal}}吨</text>
      </view>
      <view>
        <text>销售额</text>
        <text style="color: #333;">{{result.totalprice}}</text>
      </view>
    </view>
    <view  class="line-chart">
      <LEchart ref="chartRef"></LEchart>
    </view>
  </view>
</template>


<style scoped lang="scss">
.individual-statistics {
  min-height: 100vh;
  background-color: #fff;
  padding: 0 25rpx;
  .line-chart{
    width: 100%;
    margin-top: 44rpx;
  }

  .count {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 21rpx;
    gap:15rpx;

    > view {
      width: 100%;
      height: 145rpx;
      background: #F6F6F6;
      border-radius: 16rpx;
      padding: 20rpx 0 0 24rpx;
      display: flex;
      flex-direction: column;

      text:last-child {
        font-weight: bold;
        font-size: 40rpx;
        margin-top: 20rpx;

      }

      text:first-child {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }
    }
  }


  .sift {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    height: 55rpx;
    column-gap: 30rpx;
    display: flex;

    .date-range {
      height: 55rpx;
      flex-grow: 1;
      background: #F0F3FA;
      border-radius: 8rpx;
      display: flex;

      .date {
        flex-grow: 1;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .month {
        height: 50rpx;
        width: 165rpx;
        padding-right: 15rpx;
        display: flex;
        align-items: center;
        position: relative;

        &:after {
          content: "";
          width: 2rpx;
          height: 42rpx;
          position: absolute;
          background: #E0E9FB;
          right: 0;
          border-radius: 1rpx;

        }

        text {
          font-weight: 500;
          margin-right: 18rpx;
          font-size: 26rpx;
          color: #333333;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
        }

        image {
          width: 20rpx;
          margin-left: auto;
          height: 20rpx;
        }
      }
    }

    .department {
      width: 180rpx;
      height: 55rpx;
      background: #F0F3FA;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      text {
        font-weight: 500;
        margin-right: 18rpx;
        font-size: 26rpx;
        color: #333333;
        line-height: 72rpx;
      }

      image {
        width: 20rpx;
        height: 20rpx;
      }
    }

  }

}
</style>
